<template>
	<view style="background: #F6F5F8;height: 900px;">
		<view style="height: 100px;">
			<u-navbar title="历史订单" @rightClick="rightClick" :autoBack="true" bgColor="#25262C" height="120px" leftIconColor="#FFFFFF" titleStyle="color:white;font-size:25px">
			</u-navbar>
		</view>
		<view style="margin-top: 20px;">
			 <u-subsection :list="list" :current="current" @change="sectionChange" fontSize="15px"
			 	class="subsection" bgColor="#25262C" inactiveColor="#827F7F" bold></u-subsection>
			 <u-action-sheet :actions="list" @select="selectClick"></u-action-sheet>
		</view>
		<view class="view-body1" v-if="zanwudingdan">
			<img  src="../../../static/内容为空.png" class="image"></img>
			<view style="font-size: 20px;margin-left: 145px;margin-top: 20px;">暂无{{list[current]}}订单</view>
		</view>
		<view class="view-body" v-if="lishidingdan" v-for="item in historyOrders" :key="item.id">
			<view class="view-body-a">
				<view style="width: 50px;height: 25px;background: #FFC53E;border-top-left-radius: 20px;border-top-right-radius: 15px;border-bottom-left-radius: 2px;border-bottom-right-radius: 15px;font-size: 15px;text-align: center;line-height: 25px;font-weight: 600;margin-left: 20px;margin-top: 12px;">
					外卖
				</view>
				<view style="margin-left: 80px;font-size: 15px;margin-top: -22px;">
					订单号
				</view>
				<view style="margin-left: 130px;font-size: 15px;margin-top: -20px;font-weight: 600;">
					{{item.orderNumber}}
				</view>
				<view style="margin-left: 300px;font-size: 15px;margin-top: -20px;font-weight: 600;">
					{{item.orderFlag}}
				</view>
			</view>
			<view class="view-body-b">
				<view class="view-body-b-a">
					<view style="width: 15px;height: 15px;border-radius: 100%;background: #FFC53E;margin-left: 20px;margin-top: 22px;">
					</view>
					<view style="margin-left: 43px;margin-top: -18px;font-size: 15px">
						{{item.shopAddress}}
					</view>
					<view style="margin-left: 43px;margin-top: 1px;font-size: 18px;font-weight: 600;">
						{{item.shopName}}
					</view>
				</view>
				<view style="height: 63px;width: 1px;margin-left: 28px;margin-top: -42px;border-left: 1px dashed black;">
					
				</view>
				<view class="view-body-b-a">
					<view style="width: 15px;height: 15px;border-radius: 100%;background: #FFC53E;margin-left: 22px;margin-top: 3px;">
					</view>
					<view style="margin-left: 43px;margin-top: -18px;font-size: 15px">
						{{item.userName}}
					</view>
					<view style="margin-left: 43px;margin-top: 1px;font-size: 18px;font-weight: 600;">
						{{item.userAddress}}
					</view>
				</view>
			</view>
			<view style="margin-left: 140px;font-size: 13px;margin-top: 13px;">{{item.updateTime}}</view>
		</view>
	</view>
</template>		

<script>
	export default {
		data() {
			return {
				zanwudingdan:false,
				lishidingdan:true,
				id:'',
				list: ['全部', '完成', '超时'],
				current: 0,
				status:0,
				status1:0,
				historyOrders:[]//历史订单
			}
		},
		onLoad(options) {
			this.id = options.riderId
			this.status=5
			this.status1=6
			this.findAllhistoryOrders()
		},
		methods: {
			sectionChange(index) {
				this.current = index;
				if(this.current == 0){
					this.status=5
					this.status1=6
					this.findAllhistoryOrders()
				}
				if(this.current == 1){
					this.status=5
					this.status1=0
					this.findAllhistoryOrders()
				}
				if(this.current == 2){
					this.status=0
					this.status1=6
					this.findAllhistoryOrders()
				}
				},
			findAllhistoryOrders(){
				this.$myRequest({
					url:'/commodityOrder/findAllhistoryOrders',
					method:'get',
					data:{
						'id':this.id,
						'status':this.status,
						'stutus1':this.status1
					}
				}).then(res=>{
					this.historyOrders = res.data.obj
					if(this.historyOrders.length!=0){
						this.zanwudingdan = false
						this.lishidingdan = true
					}else{
						this.zanwudingdan = true
						this.lishidingdan = false
					}
				})
			},
			rightClick() {
				
			},
		}
	}
</script>

<style>
	.image{
		margin-top: 90px;
		margin-left: 20px;
		width: 400px;
	}
	.view-body-b-a{
		height: 80px;
		overflow: hidden;
	}
	.view-body-b{
		width: 90%;
		height: 175px;
		margin-left: 20px;
		margin-top: 1px;
		background: #FFFFFF;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		overflow: hidden;
	}
	.view-body-a{
		width: 90%;
		height: 50px;
		margin-left: 20px;
		margin-top: 15px;
		background: #FFFFFF;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		overflow: hidden;
	}
	.subsection {
		position: fixed;
		width: 100%;
		text-align: center;
		margin-top: -33px;
		z-index: 11;
	}
	.view-body1 {
		width: 100%;
		height: 780px;
		background: #FFFFFF;
		overflow: hidden;
	}
</style>
